<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 JUI All rights reserved.
 */
;(function () {

<span id='global-property-'>    /**
</span>     * @ignore
     * @private
     */
    JUI.Class('GridView', {
        init: function (grid) {
            this._super(grid);

            this.grid = grid;
            var id = grid.id;
            this.idField = this.opt('idField') || ('idField_' + id);
            this.checkboxTrigger = 'checkboxChange';
            this.radioTrigger = 'radioChange';

            this.selectCache = grid.getSelectCache();
        }
        // 刷新
        , refresh: function () {
            var data = this.grid.data;
            this.createHead();
            this.refreshBody(data);
            this.createFoot();

            this.refreshPage(data);

            this.grid.fire('RefreshSuccess', {$table: this.$tpl, grid: this.grid,data: data});
        }
        // 创建单元格
        , createBodyTd: function (index, row, header) {
            var $td = $('&lt;td&gt;&lt;/td&gt;');
            this.formatTd(index, row, header, $td);
            return $td;
        }
        // 格式化单元格
        , formatTd: function (index, row, header, $td) {
            var that = this;
            var val = row[header.field];
            var align = header.align;

            if (align) {
                $td.attr('align', align);
            }
            if (header.hidden === true) {
                $td.hide();
            }
            if (header.styler) {
                $td.attr('style', header.styler(val, row, index));
            }
            // 文本在同一行
            if (that.opt('nowrap')) {
                $td.css({'whiteSpace': 'nowrap'});
            } else {
                $td.css({'whiteSpace': 'normal', 'wordWrap': 'break-word'});
            }

            if (header.checkbox) {
                that.buildSelections($td, index, row, header);
                return;
            }

            if (header.formatter) {
                val = header.formatter(val, row, index, $td);
            }

            $td.on('click', function (e) {
                that.vCellClick(header, row, e, index);
            }).on('dblclick', function (e) {
                that.vCellDblClick(header, row, e, index);
            });

            $td.html(val);
        }
        // 创建tr
        , createBodyTr: function (index, row) {
            var $tr = $('&lt;tr&gt;&lt;/tr&gt;');
            var that = this;
            $tr.on('click', function (e) {
                that.vRowClick(index, row, e);
            }).on('dblclick', function (e) {
                that.vRowDblClick(index, row, e);

            });
            return $tr;
        }
        // 刷新表格内容
        , refreshBody: function (data) {
            var rows = data[this.opt('serverRowsName')];
            var columns = this.opt('columns')[0];
            var $tbody = this.$tpl.find('tbody');

            if (rows &amp;&amp; rows.length) {
                // 清空内容
                $tbody.html('');
                for (var rowIndex = 0, len = rows.length; rowIndex &lt; len; rowIndex++) {
                    var rowData = rows[rowIndex];
                    var $tr = this.createBodyTr(rowIndex, rowData);
                    // 行索引列
                    this.appendRowNumberColumn(rowIndex, $tr);

                    for (var colIndex = 0, jlen = columns.length; colIndex &lt; jlen; colIndex++) {
                        var $td = this.createBodyTd(rowIndex, rowData, columns[colIndex]);
                        $tr.append($td);
                    }
                    $tbody.append($tr);
                }
            } else {
                var colspan = this.getColCount();
                $tbody.html('&lt;tr class=&quot;ui-widget-content&quot;&gt;&lt;td colspan=&quot;' + colspan + '&quot;&gt;' + this.grid.opts.emptyDataMsg + '&lt;/td&gt;&lt;/tr&gt;');
            }

        }
        // 行索引列
        , appendRowNumberColumn: function (rowIndex, $tr) {
            // 行索引列
            if (this.grid.opts.rownumbers) {
                var $rowNumTd = this.createBodyTd(0, {rownum: rowIndex + 1}, {field: 'rownum'});
                var rowNumberTdWidth = parseInt(this.opt('rowNumberTdWidth'));
                $rowNumTd.width(rowNumberTdWidth).css('background-color', '#fff');
                $tr.append($rowNumTd);
            }
        }
        // 创建表头,只创建一次
        , createHead: function () {
            if (!this.headInited) {
                var columns = this.opt('columns')[0];
                var $tr = this.createHeadTr();

                // 索引列
                if (this.grid.opts.rownumbers) {
                    var $rownumTd = this.createHeadTh(0, {title: this.grid.opts.rownumberTitle});
                    $rownumTd.addClass('juigrid-rownumber-head-th');
                    $tr.append($rownumTd);
                }

                for (var colIndex = 0, ilen = columns.length; colIndex &lt; ilen; colIndex++) {
                    var $td = this.createHeadTh(colIndex, columns[colIndex]);
                    $td.addClass('juigrid-head-th');
                    $tr.append($td);
                }

                this.$tpl.find('thead').append($tr);

                this.headInited = true;
            }
        }
        // 创建表头tr
        , createHeadTr: function (index, header) {
            var $tr = $('&lt;tr&gt;&lt;/tr&gt;');

            return $tr;
        }
        , createHeadTh: function (index, header) {
            var $th = $('&lt;th&gt;&lt;/th&gt;');
            $th.html(header.title);
            this.formatHeadTd(header, $th);
            return $th;
        }
        , formatHeadTd: function (header, $th) {
            var that = this;
            var halign = header.halign || header.align;
            if (halign) {
                $th.css('text-align', halign);
            }
            if (header.hidden === true) {
                $th.hide();
            }

            if (header.width) {
                $th.width(parseInt(header.width));
            }
            // 全选勾选
            if (header.checkbox) {
                if (that.isMultiSelect()) {
                    var $checkAll = this.createCheckAll();

                    $th.html($checkAll).css('text-align', 'center');
                }

                $th.width(that.opt('checkTdWidth'));
            }
            // 排序
            if (header.sortable) {
                this.initSortBtn(header, $th);
            }
        }
        , initSortBtn: function (header, $th) {
            var that = this;
            var currentSortOrder = that.sortOrder;
            var sortName = header.field;

            var $span = $(this).find('span');

            if ($span.length == 0) {
                $span = $('&lt;span&gt;');
                $th.append($span);
            }

            $th.css({cursor: 'pointer'}).click(function () {
            	$th.siblings().find('span').html('');
                if (this.currentSortOrder == 'ASC') {
                    $span.html('▼');
                    this.currentSortOrder = &quot;DESC&quot;;
                } else {
                    $span.html('▲');
                    this.currentSortOrder = &quot;ASC&quot;;
                }
                that.grid.sort(sortName, this.currentSortOrder);
            });
        }
        // 创建勾选全部
        , createCheckAll: function () {
            var that = this;

            that.$checkAll = $('&lt;input type=&quot;' + that.getCheckType() + '&quot;&gt;')
                .bind('doClick', function (e, checked) {// 自定义事件
                    var $checkboxs = checked ? that.getUnCheckCheckbox() : that.getCheckedCheckbox();
                    var fireEventName = checked ? 'CheckAll' : 'UncheckAll';

                    $checkboxs.each(function () {
                        this.checked = checked;
                        $(this).trigger(that.checkboxTrigger);
                    });

                    that.grid.fire(fireEventName, {
                        rows: that.grid.getRows(),
                        $target: that.$checkAll,
                        $checkboxs: $checkboxs
                    });
                }).click(function () {
                    $(this).trigger('doClick', [this.checked]);
                }).css('cursor', 'pointer');

            return that.$checkAll;
        }
        // 创建表尾,只创建一次
        , createFoot: function () {
            if (!this.footInited) {
                var $tfoot = this.$tpl.find('tfoot');
                var $tr = $('&lt;tr&gt;&lt;/tr&gt;');
                var colspan = this.getColCount();

                var $td = $('&lt;td colspan=&quot;' + colspan + '&quot; &gt;&lt;/td&gt;');
                var $ul = $('&lt;ul class=&quot;pagination&quot; style=&quot;margin:0;&quot;&gt;&lt;/ul&gt;');

                if (this.grid.opts.pagination) {
                    $ul.append(this.buildPageSizeSelect());
                    $ul.append(this.buildFirst());
                    $ul.append(this.buildPrev());
                    $ul.append(this.buildNext());
                    $ul.append(this.buildLast());
                    $ul.append(this.buildPageMsg());

                    $td.append($ul);

                    $tr.append($td);
                }

                $tfoot.append($tr);

                this.footInited = true;
            }
        }
        , getColCount: function () {
            if (!this._colspan) {
                var columnCount = this.opt('columns')[0].length;
                this._colspan = this.grid.opts.rownumbers ? columnCount + 1 : columnCount;
            }
            return this._colspan;
        }
        , buildPageSizeSelect: function () {
            var html = [];
            var pageSelectStyle = this.grid.opts.pageSelectStyle;
            html.push('&lt;select style=&quot;' + pageSelectStyle + '&quot;&gt;');

            var pageList = this.getPageList();
            var page = this.getPage();

            for (var i = 0, ilen = pageList.length; i &lt; ilen; i++) {
                html.push('&lt;option value=&quot;' + pageList[i] + '&quot;&gt;' + pageList[i] + '&lt;/option&gt;');
            }
            html.push('&lt;/select&gt;');

            this.$select = $(html.join(''));


            this.$select.change(function () {
                page.pageSize = parseInt(this.value);
                page.onChange();
            });

            return $('&lt;li&gt;').append(this.$select);
        }
        , buildFirst: function () {
            var page = this.getPage();
            this.$first = $('&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;').click(function () {
                page.first();
            });

            return this.$first;
        }
        , buildPrev: function () {
            var page = this.getPage();
            this.$prev = $('&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;上一页&lt;/a&gt;&lt;/li&gt;').click(function () {
                page.pre();
            });

            return this.$prev;
        }
        , buildNext: function () {
            var page = this.getPage();
            this.$next = $('&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;下一页&lt;/a&gt;&lt;/li&gt;').click(function () {
                page.next();
            });

            return this.$next;
        }
        , buildLast: function () {
            var page = this.getPage();
            this.$last = $('&lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;尾页&lt;/a&gt;&lt;/li&gt;').click(function () {
                page.last();
            });

            return this.$last;
        }
        , buildPageMsg: function () {
            this.$pageInfo = $('&lt;div style=&quot;float:left;margin-left:10px;line-height:34px;&quot;&gt;&lt;/div&gt;');
            var $msg = $('&lt;li&gt;&lt;/li&gt;');
            $msg.append(this.$pageInfo);

            return $msg;
        }
        , refreshPage: function () {
            if (this.grid.opts.pagination) {
                var page = this.getPage();
                this.$pageInfo.html('第' + page.pageIndex + '/' + page.pageCount + '页，共' + page.total + '条数据');

                this.$first.attr('class', page.canFirst() ? '' : 'disabled');
                this.$prev.attr('class', page.canPre() ? '' : 'disabled');
                this.$next.attr('class', page.canNext() ? '' : 'disabled');
                this.$last.attr('class', page.canLast() ? '' : 'disabled');

                this.$select.val(page.pageSize);
            }
        }
        , getPageList: function () {
            var pageList = this.opt('pageList');
            var pageSize = parseInt(this.opt('pageSize')) || 10;
            pageList.push(pageSize);

            var map = {};

            for (var i = 0, ilen = pageList.length; i &lt; ilen; i++) {
                map[pageList[i]] = true;
            }

            var ret = [];

            for (var key in map) {
                ret.push(key);
            }

            return ret;
        }
        , getPage: function () {
            return this.grid.page;
        }
        , reset: function () {
            if (this.$checkAll) {
                this.$checkAll.prop('checked', false);
            }
        }
        // 构建选择框
        , buildSelections: function ($td, index, row, header) {
            var that = this;
            var clickHandler = that.isSingleSelect()
                ? this.radioClickHandler
                : this.checkboxClickHandler;

            var pkId = header.field || this.idField;
            this.opt('idField', pkId);
            var value = row[pkId] || ('value_' + index + &quot;_&quot; + that.grid.page.pageIndex);

            $td.addClass('pui-datatable-tdcheck')
            var initChecked = row.selected ? ' checked=&quot;checked&quot; ' : '';
            // 创建
            var $checkbox = $('&lt;input type=&quot;' + that.getCheckType() + '&quot; ' +
                'class=&quot;jui-check&quot; ' +
                'data-index=&quot;' + index + '&quot; ' +
                'name=&quot;' + pkId + '&quot; ' +
                'value=&quot;' + value + '&quot; ' +
                '' + initChecked + '&gt;')
                .click(function (e) {
                    e.stopPropagation();

                    clickHandler.call(that, $(this), index, row);
                }).css('cursor', 'pointer');

            this.bindCheckState($checkbox);

            // 添加自定义事件
            this.bindCheckboxEvent($checkbox, index, row);

            $td.html($checkbox).css('text-align', 'center');
        }
        , bindCheckState: function ($checkbox) {
            if (this.isSelectCache()) {
                var value = $checkbox.val();
                var isInCache = this.grid.isInCache(value);
                $checkbox.prop('checked', isInCache);
            }
        }
        , bindCheckboxEvent: function ($checkbox, index, row) {
            var that = this;
            var param = {index: index, row: row, $target: $checkbox};

            $checkbox.bind(that.checkboxTrigger, function () {
                var checked = this.checked;
                var eventName = checked ? 'Check' : 'Uncheck';
                var $cbx = $(this);

                that.setCheckboxCache($cbx, row);

                if (that.opt('checkboxDeepTrigger')) {
                    that.grid.fire(eventName, param);
                }
            });

            $checkbox.bind(that.radioTrigger, function () {
                var checked = this.checked;
                var eventName = checked ? 'Select' : 'UnSelect';
                var $radio = $(this);
                var $tr = $radio.parents('tr');

                that.setRadioCache($radio, row);

                that.grid.fire(eventName, param);

            });
        }
        , setCheckboxCache: function ($checkbox, row) {
            if (this.isSelectCache()) {
                this.getSelectCache()[$checkbox.val()] = $checkbox.prop('checked') ? row : false;
            }
        }
        , setRadioCache: function ($radio, row) {
            if (this.isSelectCache()) {
                this.grid.resetSelectCache();
                this.getSelectCache()[$radio.val()] = $radio.prop('checked') ? row : false;
            }
        }
        , getSelectCache: function () {
            return this.grid.getSelectCache();
        }
        , isSelectCache: function () {
            return this.grid.isSelectCache();
        }
        // 单选事件
        , radioClickHandler: function ($radio, index, row) {
            $radio.trigger(this.radioTrigger);
        }
        // 多选事件
        , checkboxClickHandler: function ($checkbox, index, row) {
            $checkbox.trigger(this.checkboxTrigger);
        }
        , isCheckedAll: function () {
            var currentCheckLen = this.getCheckedCheckbox().length;
            var rowLen = this.grid.getRows().length;
            return rowLen == currentCheckLen;
        }
        , checkAll: function () {
            var that = this;
            if (this.isMultiSelect()) {
                var checked = true;
                this.$checkAll
                    .prop('checked', checked)
                    .trigger('doClick', [checked]);
            }
        }
        , uncheckAll: function () {
            var that = this;

            if (this.isMultiSelect()) {
                var checked = false;
                this.$checkAll
                    .prop('checked', checked)
                    .trigger('doClick', [checked]);
            } else { // 单选情况下
                var $checkboxs = this.getCheckedCheckbox();

                $checkboxs.each(function () {
                    this.checked = false;
                    $(this).trigger(that.getTriggerName());
                });
            }
        }
        , selectRow: function (index) {
            if (this.isSingleSelect()) {
                var $radio = this.getAllCheckbox().eq(index);
                console.log($radio)
                var checked = $radio.prop('checked');
                if (!checked) {
                    $radio.prop('checked', !checked);
                    $radio.trigger(this.radioTrigger);
                }
            }
        }
        , unselectRow: function (index) {
            if (this.isSingleSelect()) {
                var $radio = this.getAllCheckbox().eq(index);
                var checked = $radio.prop('checked');

                if (checked) {
                    $radio.prop('checked', !checked);
                    $radio.trigger(this.getTriggerName());
                }
            }
        }
        , checkRow: function (index) {
            if (this.isMultiSelect()) {
                var $checkbox = this.getAllCheckbox().eq(index);
                var checked = $checkbox.prop('checked');
                if (!checked) {
                    $checkbox.prop('checked', true);
                    $checkbox.trigger(this.getTriggerName());
                }
            }
        }
        , uncheckRow: function (index) {
            if (this.isMultiSelect()) {
                var $checkbox = this.getAllCheckbox().eq(index);
                var checked = $checkbox.prop('checked');
                if (checked) {
                    $checkbox.prop('checked', false);
                    $checkbox.trigger(this.getTriggerName())
                }
            }
        }
        , selectRecord: function (idVal, doTrigger) {
            var $checkbox = this.getCheckboxByIdValue(idVal);
            var checked = $checkbox.prop('checked');
            if (!checked) {
                $checkbox.prop('checked', true);
                $checkbox.trigger(this.getTriggerName());
            }
        }
        // 点击单元格事件
        , vCellClick: function (header, row, e, index) {
            var val = row[header.field];
            var param = {
                index: index
                , head: header
                , value: val
                , row: row
                , target: e.target
            };
            this.grid.fire('ClickCell', param);
        }
        // 双击单元格事件
        , vCellDblClick: function (header, row, e, index) {
            var val = row[header.field];
            var param = {
                index: index
                , head: header
                , value: val
                , row: row
                , target: e.target
            };
            this.grid.fire('DblClickCell', param);
        }
        // 单击行事件
        , vRowClick: function (index, row, e) {
            var param = {
                index: index
                , row: row
                , target: e.target
            };
            this.grid.fire('ClickRow', param);
        }
        // 双击行事件
        , vRowDblClick: function (index, row, e) {
            var param = {
                index: index
                , row: row
                , target: e.target
            };
            this.grid.fire('DblClickRow', param);
        }
        , getTriggerName: function () {
            return this.isSingleSelect() ? this.radioTrigger : this.checkboxTrigger;
        }
        , isMultiSelect: function () {
            return !this.isSingleSelect();
        }
        , isSingleSelect: function () {
            return this.opt('singleSelect');
        }
        , getCheckType: function () {
            if (!this.checkType) {
                this.checkType = this.isSingleSelect() ? 'radio' : 'checkbox';
            }
            return this.checkType;
        }
        , getCheckedCheckbox: function () {
            return this.$wraper.find('input[class=&quot;jui-check&quot;]:checked');
        }
        , getAllCheckbox: function () {
            return this.$wraper.find('input[class=&quot;jui-check&quot;]');
        }
        , getUnCheckCheckbox: function () {
            return this.$wraper.find('input[class=&quot;jui-check&quot;]:not(:checked)');
        }
        , getCheckboxByIdValue: function (idVal) {
            return this.$wraper.find('input[value=&quot;' + idVal + '&quot;]');
        }
        , getCheckboxByIndex: function (index) {
            return this.$wraper.find('input[data-index=&quot;' + index + '&quot;]');
        }
        // 返回选中的索引
        , getCheckedIndex: function () {
            var $inputs = this.getCheckedCheckbox();
            var indexs = [];
            $inputs.each(function () {
                indexs.push(parseInt($(this).attr('data-index')));
            });
            return indexs;
        }
        , getTemplate: function () {
            var $table = $('&lt;table&gt;' +
                '&lt;thead&gt;&lt;/thead&gt;' +
                '&lt;tbody&gt;&lt;/tbody&gt;' +
                '&lt;tfoot&gt;&lt;/tfoot&gt;' +
                '&lt;/table&gt;');

            var gridCfg = JUIConfig.Grid;
            var tableCss = gridCfg.tableCss;

            $table.addClass(tableCss);

            if (this.opt('striped')) {
                $table.addClass(gridCfg.tableStripedCss);
            }
            if (this.opt('hover')) {
                $table.addClass(gridCfg.tableHoverCss);
            }
            if (this.opt('bordered')) {
                $table.addClass(gridCfg.tableBrderedCss);
            }

            $table.css({width: this.grid.getTableWidth()});

            return $table;
        }
    }, JUI.View);

})();</pre>
</body>
</html>
